<template>
  <div class='parent-div'>
    <div class="content-div">
      <!-- 文章标题 -->
      <div class="article-header">
        <h1 class="article-title">{{ articleStore.currentArticle.title }}</h1>
        <div class="article-meta">
          <span class="author">作者：{{ articleStore.currentArticle.createBy }}</span>
          <span class="date">发布时间：{{ articleStore.formattedCreateTime }}</span>
          <span class="views">阅读量：{{ articleStore.currentArticle.clickNum }}</span>
        </div>
      </div>
      
      <!-- 文章内容 -->
      <div class="article-content" v-html='articleStore.articleHtml'></div>
      
      <!-- 交互按钮组 -->
      <div class="button-group">
        <!-- 点赞按钮 -->
        <el-button type="primary" :plain="!articleStore.isLiked" size="small" @click="toggleLike" >
          <el-icon><CaretTop/></el-icon>赞同 {{ articleStore.likeCount }}
        </el-button>
        <!-- 点踩按钮 -->
        <el-button type="primary" :plain="!articleStore.isDisliked" size="small"  @click="toggleDislike" >
          <el-icon><CaretBottom /></el-icon>
        </el-button>
        <!-- 收藏按钮 -->
        <el-button type="warning" size="small" link @click="toggleCollect">
          <el-icon style="margin-right: 8%;">
            <!-- 判断是否已收藏 -->
            <template v-if="articleStore.isCollected">
              <StarFilled />
            </template>
            <template v-else>
              <Star />
            </template>
          </el-icon>
          收藏 
        </el-button>
      </div>
    </div>
    <div class="comment-div">评论区</div>
  </div>
</template>
 
<script setup lang="ts">
  import { onMounted } from 'vue'
  import { useArticleStore } from '@/stores/modules/article'
  import { CaretTop, CaretBottom, Star, StarFilled } from '@element-plus/icons-vue'

  //=============== 数据 ===============
  const articleStore = useArticleStore()

  //=============== 函数 ===============
  // 点赞按钮点击事件
  const toggleLike = async () => {
    if (!articleStore.isLiked) {
      // 点赞
      articleStore.likeCount += 1  
      await articleStore.showAttitude({
        type: "agree",
        articleId: articleStore.currentArticle.id!
      })
    } else {
      // 取消点赞
      articleStore.likeCount -= 1  
      await articleStore.showAttitude({
        type: "noAgree",
        articleId: articleStore.currentArticle.id!
      })
    }
    articleStore.isLiked = !articleStore.isLiked // 无论是点赞还是取消点赞，修改是否点赞的状态
    articleStore.isDisliked = false // 无论是点赞还是取消点赞，都会把点踩的状态取消
  }

  // 点踩按钮点击事件
  const toggleDislike = async () => {
    if (!articleStore.isDisliked) {
      if (articleStore.isLiked) {
        // 已经点赞后点踩，才会减少点赞量
        articleStore.isLiked = !articleStore.isLiked // 点踩之后是否点赞的状态会被设置为否
        articleStore.likeCount -= 1
        await articleStore.showAttitude({
          type: "afterDislike",
          articleId: articleStore.currentArticle.id!
        })
      } else {
        await articleStore.showAttitude({
          type: "dislike",
          articleId: articleStore.currentArticle.id!
        })
      }
    } else {
      // 取消点踩，不做操作
    }
    articleStore.isDisliked = !articleStore.isDisliked // 无论是点踩还是取消点踩，修改是否点踩的状态
  }

  // 收藏按钮点击事件
  const toggleCollect = async () => {
    if (!articleStore.isCollected) {
      await articleStore.showAttitude({
        type: "collect",
        articleId: articleStore.currentArticle.id!
      })
    } else {
      // 取消收藏
      await articleStore.showAttitude({
        type: "noCollect",
        articleId: articleStore.currentArticle.id!
      })
    }
    articleStore.isCollected = !articleStore.isCollected
  }

  //=============== 钩子 ===============
  onMounted(() => {
    // 根据ID查询文章内容
    if (articleStore.currentArticle.id) {
      articleStore.queryArticleDetail(articleStore.currentArticle.id)
    }
  })


</script>

<style scoped>
.parent-div {
  background-color: transparent; /* 背景色透明 */
  border: 2px solid transparent; /* 边框透明 */
  border-radius: 15px; /* 圆角 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  gap: 10px; /* 子元素之间的间距 */
  margin: 0 auto; /* 水平居中对齐 */
}

.content-div, .comment-div {
  background-color: white; /* 背景色白色 */
  border-radius: 10px; /* 圆角 */
  padding: 15px;
  box-sizing: border-box; /* 包括内边距和边框的总宽度 */
}

.content-div {
  display: flex;
  flex-direction: column; /* 垂直排列 content-div 内的子元素 */
  gap: 15px; /* 子元素之间的间距 */
}

/* 文章头部样式 */
.article-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.article-title {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.article-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #909399;
}

.article-meta span {
  display: flex;
  align-items: center;
}

/* 文章内容样式 */
.article-content {
  line-height: 1.5;
  font-size: 14px;
  color: #606266;
}

/* 调整所有按钮文字大小 */
:deep(.button-group .el-button) {
  font-size: 13px;
}

.button-group {
  display: flex;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}
</style>